<template>
  <div class="newFriendContainer">
    <template>
      <el-table style="width: 100%"
                max-height="100%"
                :data="newFriendData">
        <el-table-column prop="m_Time"
                         label="日期"
                         sortable
                         width="180">
        </el-table-column>
        <el-table-column prop="m_FromUserID"
                         label="账号昵称"
                         sortable
                         width="180">
        </el-table-column>
        <el-table-column prop="m_PostMessages.message"
                         label="消息">
        </el-table-column>
        <el-table-column label="操作">
          <!-- 插槽操作 -->
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       @click="agreeApply(scope.row)">同意</el-button>
            <el-button type="danger"
                       size="mini"
                       @click="delApply(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 同意申请操作弹窗 -->
    <el-dialog title="同意申请"
               :visible.sync="agreeDialogVisible"
               width="50%"
               :before-close="handleClose"
               append-to-body>
      <!--  选择分组 -->
      <el-select v-model="messageFromSend.F_FriendGroup"
                 placeholder="选择分组"
                 size="mini">
        <el-option v-for="item in groups"
                   :key="item.fg_Name"
                   :label="item.fg_Name"
                   :value="item.fg_Name">
        </el-option>
      </el-select>

      <!-- 添加分组按钮 -->
      <el-button type="info"
                 size="mini"
                 class="btnaddgroup"
                 @click="addgroupvisible = !addgroupvisible">添加分组</el-button>

      <!-- 添加好友分组组件 -->
      <div class="addgroupwrap"
           v-if="addgroupvisible">
        <!-- 群组名 -->
        <el-input size="mini"
                  clearable
                  v-model="addgroupdata.FG_Name"
                  style="width:200px;margin-bottom:10px"
                  placeholder="选择组名">
          <el-button size="mini"
                     slot="append"
                     @click="addGroup">提交</el-button>
        </el-input>
      </div>
      <!-- 好友备注 -->
      <el-input size="mini"
                v-model="messageFromSend.F_Name"
                style="width:300px; display:block;"
                clearable
                placeholder="好友备注"></el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="agreeDialogVisible = false"
                   size="mini">取 消</el-button>
        <el-button type="primary"
                   @click="subApplyEvent"
                   size="mini">提 交</el-button>
      </span>
    </el-dialog>

    <!--  删除消息弹窗 -->
    <el-dialog title="提示"
               :visible.sync="cancelDialogVisible"
               width="30%"
               :before-close="handleClose"
               append-to-body>
      <span>是否删除此申请?</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="delApplyEvent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'NewFriend',
  props: ['newFriendData'],
  data () {
    return {
      // 同意申请弹窗
      agreeDialogVisible: false,
      // 自己的所有分组
      groups: [],
      // 添加分组可见
      addgroupvisible: false,
      // 添加好友分组数据
      addgroupdata: {
        FG_UserID: window.sessionStorage.getItem('selfInfo'), // 自己的账号
        FG_Name: '' // 组名
      },
      // 删除消息弹窗
      cancelDialogVisible: false,
      // 消息的id
      M_ID: '',
      // 来自发送方的数据
      messageFromSend: {
        M_PostMessages: '', // 发送消息内容
        M_Status: '', // 消息的状态
        M_Time: '', // 发送时间
        M_MessageTypeID: '', // 消息类型
        M_FromUserID: '', // 谁发的
        M_ToUserID: '', // 发给谁
        F_Name: '', // 备注名字
        F_FriendGroup: '', // 分组名字
        M_ID: '' // 消息主键
      }

    }
  },
  methods: {
    // 同意申请
    agreeApply (data) {
      this.agreeDialogVisible = true
      this.messageFromSend.M_PostMessages = JSON.stringify(data.m_PostMessages)
      this.messageFromSend.M_Status = data.m_Status
      this.messageFromSend.M_Time = data.m_Time
      this.messageFromSend.M_MessageTypeID = data.m_MessageTypeID
      this.messageFromSend.M_FromUserID = data.m_FromUserID
      this.messageFromSend.M_ToUserID = data.m_ToUserID
      this.messageFromSend.M_ID = data.m_ID

      // 得到所有分组
      this.getAllGroup()
    },
    // 拒绝申请
    delApply (data) {
      this.M_ID = data.m_ID
      this.cancelDialogVisible = true
    },
    // 拒绝申请的事件
    delApplyEvent () {
      this.$http.get('cancelapplyfriend', { params: { M_ID: this.M_ID } })
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            // 删除成功后
            // 刷新消息列表
            this.$emit('refresh')
            this.cancelDialogVisible = false
            return this.$message.success(res.msg)
          }
        })
    },
    // 防止弹窗误关
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 提交申请事件
    subApplyEvent () {
      var qs = require('qs')
      this.$http.post('aggreapplyfriend', qs.stringify(this.messageFromSend))
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            // 刷新增加消息列表
            this.$emit('refresh')
            // 刷新好友数据 (待写)

            // 关闭弹窗
            this.agreeDialogVisible = false

            return this.$message.success(res.msg)
          }
        })
    },
    // 添加好友分组
    addGroup () {
      var qs = require('qs')
      this.$http.post('friendgroup', qs.stringify(this.addgroupdata))
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            this.getAllGroup()
            this.addgroupvisible = false
            return this.$message.success(res.msg)
          }
        })
    },
    // 得到该好友的所有分组
    getAllGroup () {
      this.$http.get('friendgroup', { params: { account: this.addgroupdata.FG_UserID } }).then((response) => {
        const res = response.data
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.groups = res.data
        return this.$message.success(res.msg)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.newFriendContainer {
  margin-top: 50px;
}

.btnaddgroup {
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>
